import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface CurrentAlertProps {
  width?: string | number;
  height?: string | number;
  backgroundColor?: string;
  backgroundOpacity?: number;
  iconPath?: string;
  iconSize?: {
    width?: number;
    height?: number;
  };
  alertText?: string;
  alertTextColor?: string;
  alertFontSize?: number;
  alertFontWeight?: string | number;
  alertLetterSpacing?: string;
  alertLineHeight?: string;
  alertAlign?: 'left' | 'center' | 'right';
  showIcon?: boolean;
  iconOpacity?: number;
  alertStatus?: 'none' | 'warning' | 'danger' | 'normal';
  onIconClick?: () => void;
  onTextClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const CurrentAlert = forwardRef<HTMLDivElement, CurrentAlertProps>((props, ref) => {
  const {
    width = 460,
    height = 50,
    backgroundColor = 'rgba(66,106,144,0.29)',
    backgroundOpacity = 1,
    iconPath = 'http://localhost:8085/static/images/qixiangfangzhai/bz33.png',
    iconSize = {
      width: 32,
      height: 32
    },
    alertText = '当前无预警',
    alertTextColor = '#00FFF1',
    alertFontSize = 16,
    alertFontWeight = 500,
    alertLetterSpacing = '0.57px',
    alertLineHeight = '24px',
    alertAlign = 'left',
    showIcon = true,
    iconOpacity = 1,
    alertStatus = 'none',
    onIconClick,
    onTextClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    '--background-color': backgroundColor,
    '--background-opacity': backgroundOpacity,
    '--icon-opacity': iconOpacity,
    ...style
  } as React.CSSProperties;

  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onIconClick) {
      onIconClick();
    }
  };

  const handleTextClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onTextClick) {
      onTextClick();
    }
  };

  const currentAlertClassName = ['current-alert', theme, alertStatus, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={currentAlertClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="horn-item left-top" />
      <div className="horn-item right-top" />
      <div className="horn-item left-bottom" />
      <div className="horn-item right-bottom" />
      {/* 背景容器 */}
      <div className="alert-background" />

      {/* 预警图标 */}
      {showIcon && (
        <div
          className="alert-icon"
          style={{
            width: `${iconSize.width}px`,
            height: `${iconSize.height}px`,
            backgroundImage: iconPath ? `url(${iconPath})` : undefined
          }}
          onClick={handleIconClick}
        />
      )}

      {/* 预警文字 */}
      <div
        className="alert-text"
        style={{
          color: alertTextColor,
          fontSize: `${alertFontSize}px`,
          fontWeight: alertFontWeight,
          letterSpacing: alertLetterSpacing,
          lineHeight: alertLineHeight,
          textAlign: alertAlign
        }}
        onClick={handleTextClick}
      >
        {alertText}
      </div>
    </div>
  );
});

CurrentAlert.displayName = 'CurrentAlert';

export default CurrentAlert;
